<template>
  <div class="product">
    <ul class="container product-content">
      <li
        v-for="(item,index) in categoryList"
        :key="index"
        class="product-information"
        @click="GoSearch(item)"
      >
        <div class="image">
          <img class="information" :src="item.img" :alt="item.categoryName">
        </div>
        <div class="product-btn">
          <span class="product-text">{{item.categoryName}}</span>
          <div class="icon">
            <i class="iconfont icon-right-arrow" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { toSearchPage } from '@/js/product'
import { listWapIndex } from '@/api/home/index'
export default {
  name: 'Product',
  data() {
    return {
      categoryList: []
    }
  },
  created() {
    this.getIndex()
  },
  methods: {
    // 获取首页显示分类
    getIndex() {
      listWapIndex().then(res => {
        this.categoryList = res.data
      })
    },
    detail() {
      window.location.href = '../../vuews/home/details/LoginPage.vue'
    },
    GoSearch(item) {
      // 示例
      const data = {}
      if (item.categoryType === 1) {
        data.mainCategoryId = item.categoryId
      } else {
        if (item.mainCategoryId) {
          data.mainCategoryId = item.mainCategoryId
          data.childCategoryId = item.categoryId
        }
      }
      toSearchPage(this, data)
    }
  }
}
</script>
<style scoped lang="scss">
    .product{
        background: #F5F5F5;
        .product-content{
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .product-information{
                display:flex;
                justify-content:center;
                width:285px;
                height:292px;
                margin-top:15px;
                margin-bottom:12px;
                flex-flow: row wrap;
                background:#FFFFFF;
                cursor:pointer;
                .image{
                    margin: 25px 22px 32px 23px;
                    .information{
                        width:240px;
                        height:179px;
                    }
                }
                .product-btn{
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    width:197px;
                    height:39px;
                    border-radius:27px;
                    background:#01ACA2;
                    margin: 0px 44px 17px 44px;
                    .product-text{
                        margin-right:8px;
                        font-size:21px;
                        color:#FFFFFF;
                    }
                    .icon{
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        width:23px;
                        height:23px;
                        border-radius:50%;
                        background:#FFFFFF;
                    }
                }
            }
        }
    }
</style>
